<!DOCTYPE html>
{% extends "loginbase.html" %}

{% block content %}
<div id="content" class="span8 section-body">
  <div id="section-body" class="tabbable">
    <ul class="nav nav-tabs">
      {% if my_disease_name_nav_menu %}
        {% for disease_name in my_disease_name_nav_menu %}
          {% if forloop.first %}        
            <li class="active">
              <a href="#{{ disease_name }}" data-toggle="tab" data-original-title=""> {{ disease_name }} 的記錄 <i class="icon-bar-chart"></i> 
              </a>
            </li>
          {% else %}
            <li class="">
              <a href="#{{ disease_name }}" data-toggle="tab" data-original-title=""> {{ disease_name }} 的記錄 <i class="icon-bar-chart"></i> 
              </a>
            </li>
          {% endif %}
        {% endfor %}
      {% endif %}
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="tab1"> <!--此 id 來自 for 迴圈-->
        <div class="row-fluid">
          {% include "graph.html" %}
        </div><!--某一疾病圖表內容結束-->
      </div><!--某一疾病tab結束-->
    </div><!--所有疾病對應tab結束-->
  </div><!--section-body 結束-->
</div><!--中間針對各疾病出現圖表記錄項目結束-->
<!--右邊欄位開始-->
<div class="span4" id="widget">
  <div id="accordion4" class="accordion">
    <!-- 生理指數開始囉！ -->
    <div class="accordion-group">
      <div class="accordion-heading">
        <a href="#physi" data-toggle="collapse" class="accordion-toggle" data-original-title="">
          <i class=" icon-dashboard icon-white"></i> 
          <span class="divider-vertical"></span> 
          生理指數 <i class="icon-chevron-down icon-white pull-right"></i>
        </a>
      </div>
      <div class="accordion-body collapse in" id="physi">
        <div class="accordion-inner">
          <div class="tabbable"> 
          <!-- 生理指數標籤開始！ -->
            <ul class="nav nav-tabs">
              <li>
                <a href="#wf" data-toggle="tab" data-original-title="">體重與體脂</a>
              </li>
              <li class="active">
                <a href="#bp" data-toggle="tab" data-original-title="">血壓與脈搏</a>
              </li>
              <li>
                <a href="#temperature" data-toggle="tab" data-original-title="">體溫</a>
              </li>
            </ul><!-- 生理指數標籤結束！ -->
            {% include "phygraph.html" %}
          </div>
        </div>
      </div>
    </div> <!-- 生理指數結束！ -->
    <!-- 行事曆數開始囉！ -->
    <div class="accordion-group">
      <div class="accordion-heading">
        <a href="#calendar" data-toggle="collapse" class="accordion-toggle" data-original-title="">
          <i class="icon-calendar icon-white"></i> 
          <span class="divider-vertical"></span> 
          行事曆 <i class="icon-chevron-down icon-white pull-right"></i>
        </a>
      </div>
      <div class="accordion-body collapse in" id="calendar">
        <div class="accordion-inner">
          <div align="center">
            <img src="http://placehold.it/350x400">
          </div>
        </div>
      </div>
    </div><!-- 行事曆數結束！ -->
    <!-- 社交功能開始 -->
    <div class="accordion-group">
      <div class="accordion-heading">
        <a href="#latest" data-toggle="collapse" class="accordion-toggle" data-original-title="">
          <i class="icon-group icon-white"></i> 
          <span class="divider-vertical"></span> 
          與我有相同症狀的病友<i class="icon-chevron-down icon-white pull-right"></i>
        </a>
      </div>
      <div class="accordion-body collapse in" id="latest">
        <div class="accordion-inner">
          <div class="tabbable"> 
            <!--依照病症來分 -->
            <ul class="nav nav-tabs">
              {% if my_disease_name_nav_menu %}
                {% for disease_name in my_disease_name_nav_menu %}
                  {% if forloop.first %}        
                    <li class="active">
                      <a href="#{{ disease_name }}" data-toggle="tab" data-original-title="">{{ disease_name }} </a>
                    </li>
                    {% else %}
                    <li class="">
                      <a href="#{{ disease_name }}" data-toggle="tab" data-original-title=""> {{ disease_name }} </i> 
                      </a>
                    </li>
                  {% endif %}
                {% endfor %}
              {% endif %}
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="{{ disease_name }}">
                {% include "plm.html" %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 社交功能結束 -->
  </div>
</div>
<!--右邊欄位結束-->
{% endblock %}